<template>
	<el-main>
		<div>
			您当前的角色权限为：['{{userInfo.role}}']
			<div style="margin: 24px 0;">
				切换权限：
				<el-button-group>
					<el-button 
						:type="userInfo.role==='admin'?'primary':''" 
						@click="changeRole('admin')">
						admin
					</el-button>
					<el-button 
						:type="userInfo.role==='editor'?'primary':''" 
						@click="changeRole('editor')">
						editor
					</el-button>
				</el-button-group>
			</div>
			<div>
				以权限区分按钮：
				<div style="margin: 15px 0;">
					<el-tag v-if="userInfo.role==='admin'">
						【{{userInfo.role}}】拥有全部增删改查的权限
					</el-tag>
					<el-tag v-if="userInfo.role==='editor'">
						【{{userInfo.role}}】只拥有查看或编辑的权限
					</el-tag>
				</div>
				<div style="display: flex;">
					<el-button type="primary" v-hasRole="['admin']">
						新建
					</el-button>
					<el-button type="success" v-hasRole="['admin','editor']">
						查看
					</el-button>
					<el-button type="warning" v-hasRole="['admin','editor']">
						修改
					</el-button>
					<el-button type="danger" v-hasRole="['admin']">
						删除
					</el-button>
				</div>
			</div>
		</div>
	</el-main>
</template>

<script>
	import { setUserInfo,getUserInfo } from '../../utils/permission.js'
	export default {
		name: 'Permission',
		data () {
			return{
				userInfo: JSON.parse(getUserInfo())
			}
		},
		mounted() {
			console.log(this.userInfo.role);
		},
		methods: {
			// 切换角色
			changeRole(roleName) {
				this.userInfo.role = roleName;
				setUserInfo(JSON.stringify(this.userInfo));
			}
		}
	}
</script>

<style scoped>
	div {
		color: #303133;
		font-size: 15px;
	}
</style>
